<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>three.js webgl - multiple canvases - ico_row</title>
		<meta charset="utf-8">
		<style type="text/css">
			html, body {
				color: #808080;
				font-family:Monospace;
				font-size:13px;
				text-align:center;

				background-color: #111;
				margin: 0px;
				overflow: hidden;
				width: 100%;
				height: 100%;
			}

			#info {
				position: absolute;
				top: 0px; width: 100%;
				padding: 5px;
			}

			#centerer {
				display: table;
				width: 100%;
				height: 100%;
			}

			#centerer-cell {
				display: table-cell;
				vertical-align: middle;
			}

			#container {
				margin-left: auto;
				margin-right: auto;
				width: 1040px; // 5*200 + 4*10; cols * width + cols-1 * gap
			}

			#container div {
				float: left;
			}
			#container1, #container2, #container3, #container4,#container5 {
				width: 199px;
				height: 300px;
				position: relative;
				border: 0px solid red;
				float:left;
				background-color: #fff;
			}
			#fullscreen {
				width: 100%;
				height: 100%;
				background-color: #fff;
			}
			#gap {
				width: 8px;
				height: 300 px;
				position: relative;
				border: 1px solid #000;
				float:left;
				}

			a {
				color: #0080ff;
			}

		</style>
	</head>
	<body>
		<div id="fullscreen"></div>
 
		<script type="text/javascript" src="./Three.js"></script>
		<script type="text/javascript" src="js/Detector.js"></script>
		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
		<script type="text/javascript">

function getQueryStringVars() {

    var server_variables = {};
    var query_string = window.location.search.split( "?" )[ 1 ];
    if ( ! query_string ) return false;
    var get = query_string.split( "&" );

    for ( var i=0; i < get.length; i++ ) {

        var pair = get[ i ].split( "=" );
        server_variables[ pair[ 0 ] ] = unescape( pair[ 1 ] );
    }

    return server_variables;
}
		</script>

		<script type="text/javascript">

			var MASTER = 0;
			var args = getQueryStringVars();

			if (args["master"]) { MASTER = 1 }

			var ws = new WebSocket("ws://192.168.1.126:3000/relay");
			var wsMesg = "starting";

			if (MASTER) { wsMesg = "master"; }

			ws.onopen = function() {
				ws.send(wsMesg);
			};
			ws.onclose = function() { };


			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var apps = [];

			init();
			animate();

			function init() {

				var rows = 1;
				var cols = 5;
				var colid = 2; // MASTER is screen 2 in the center
				var w = 1080;
				var h = 1920;
				var gap = 225;
 
				var fullWidth = w * cols + (cols - 1) * gap; // include gap
				var fullHeight = h * rows + (rows - 1) * gap;

				if (!MASTER) {
					colid = args["col"];
				}

				apps.push( new App( 'fullscreen', fullWidth, fullHeight, w * colid + gap * colid, h *0, w, h ) );

			} //init

			function animate() {

				for ( var i = 0; i < apps.length; ++i ) {

					apps[ i ].animate();

				}

				requestAnimationFrame( animate );
			} //animate

			function App( containerId, fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight ) {

				var container;

				var camera, scene, renderer;

				var mesh1, light;

				var mouseX = 0, mouseY = 0;

				var windowHalfX = window.innerWidth / 2;
				var windowHalfY = window.innerHeight / 2;

				init();

				function init() {

					container = document.getElementById( containerId );

					camera = new THREE.Camera( 20, container.clientWidth / container.clientHeight, 1, 20000 );
					camera.setViewOffset( fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight );
					camera.position.z = 1800;

					scene = new THREE.Scene();

					light = new THREE.DirectionalLight( 0xffffff );
					light.position.set( 0, 0, 1 );
					light.position.normalize();
					scene.addLight( light );

					var noof_balls = 101;

					var shadowMaterial = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/shadow.png' ) } );
					var shadowGeo = new THREE.PlaneGeometry( 300, 300, 1, 1 );

					for ( var i = 0; i < noof_balls; i++ ) { // create shadows
						var mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
						mesh.position.y = - 250;
						mesh.position.x = - (noof_balls - 1) /2 *400 + i * 400;
						mesh.rotation.x = - 90 * Math.PI / 180;
						scene.addObject( mesh );
					}

					var faceIndices = [ 'a', 'b', 'c', 'd' ];

					var color, f1, p, n, vertexIndex,

					geometry1 = new THREE.IcosahedronGeometry( 1 );

					for ( var i = 0; i < geometry1.faces.length; i++ ) {

						f1 = geometry1.faces[ i ];

						n = ( f1 instanceof THREE.Face3 ) ? 3 : 4;

						for( var j = 0; j < n; j++ ) {

							vertexIndex = f1[ faceIndices[ j ] ];

							p = geometry1.vertices[ vertexIndex ].position;

							color = new THREE.Color( 0xffffff );
							color.setHSV( ( p.y + 1 ) / 2, 1.0, 1.0 );

							f1.vertexColors[ j ] = color;

							color = new THREE.Color( 0xffffff );
							color.setHSV( 0.0, ( p.y + 1 ) / 2, 1.0 );
						}
					}

					var materials = [
						new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } ),
						new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true } )
					];

					for ( var i = 0; i < noof_balls; i++ ) { // create balls
						var mesh = new THREE.Mesh( geometry1, materials );
						mesh.position.x = - (noof_balls - 1) /2 *400 + i *400;
						mesh.scale.x = mesh.scale.y = mesh.scale.z = 200;
						mesh.rotation.x = i * 0.5;
						scene.addObject( mesh );
					}

					renderer = new THREE.WebGLRenderer( { antialias: true } );
					renderer.setSize( container.clientWidth, container.clientHeight );

					container.appendChild( renderer.domElement );

					if (MASTER) {
						document.addEventListener( 'mousemove', onDocumentMouseMove, false );
					} else { // slave
						ws.onmessage = function (e) {
							var message = new Array();
							message = e.data.split(",");
							mouseX = message[0];
							mouseY = message[1];
						}
					}
				} // init

				function onDocumentMouseMove( event ) {
						mouseX = ( event.clientX - windowHalfX );
						mouseY = ( event.clientY - windowHalfY );
				
						wsMesg = mouseX +","+ mouseY;
						ws.send(wsMesg);
				}

				this.animate = function() {
					render();
				};

				function render() {

					camera.position.x = -mouseX * 4;
					camera.position.y = -mouseY * 4;

					renderer.render( scene, camera );
				}
			} // App

		</script>

	</body>
</html>
